<script setup>
import {
  onMounted,
  onUpdated,
  ref,
  reactive,
  computed,
  nextTick,
  watch,
  onUnmounted
} from "vue";
import ChatDetails from "@/components/ChatDetails.vue";
import { useStore } from "../store/useStore";
import TitleNavBars from "../components/titleNavBars.vue"
import getUser from "../views/finds/getuser.vue";
const userStore = useStore();
console.log(userStore, 11111111);
const props = defineProps(["propsItem", "showDetails", "toUser"]);
console.log(props.propsItem);
const init = () => {
  const ImgId = props.propsItem
  console.log(ImgId.id);

}
import { setTimeFormat } from '@/utils/setTimeFormat.js'
import { useRouter } from "vue-router";
const router = useRouter()
const emit = defineEmits(["clearContactDetails"]);
const showShoot = ref(false)
const isPyqBottom = ref(false)
const localVideo = ref(null);
const isCalling = ref(false)
// const localStream = ref(null)
const qq = ref()
const videoStream = ref(null);
const photoUrl = ref(null);
const videoElement = ref(null);
const shoot = () => {
  console.log("拍摄");
  isPyqBottom.value = false
  showShoot.value = true
}
const startCall = async () => {
  if (isCalling.value) {
    console.warn('Call is already in progress.');
    return;
  }
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    // console.log(stream,111);  
    qq.value = stream
    // 将视频流赋值给videoStream引用  
    videoStream.value = stream;
    // 如果video元素已经挂载到DOM上，则将视频流设置为video元素的源  

    nextTick(() => {
      if (videoElement.value) {
        videoElement.value.srcObject = stream;
      }
    })

  } catch (error) {
    console.error('Failed to start call:', error);
  }
}
const stopCall = () => {
  if (videoStream.value && videoElement.value) {
    // 创建一个新的canvas元素  
    const canvas = document.createElement('canvas');
    // 获取canvas的2D渲染上下文  
    const context = canvas.getContext('2d');
    // 设置canvas的宽高为视频流的宽高  
    canvas.width = videoElement.value.videoWidth;
    canvas.height = videoElement.value.videoHeight;
    // 将视频流的当前帧绘制到canvas上  
    context.drawImage(videoElement.value, 0, 0, canvas.width, canvas.height);
    // 将canvas的内容转换为图片URL，并赋值给photoUrl引用  
    photoUrl.value = canvas.toDataURL('image/png');
    console.log(photoUrl, 111);
    // localStorage.setItem('img', photoUrl.value)
    userStore.setImgs(photoUrl.value)
  }
}
const chaAB = () => {
  //关闭摄像头
  qq.value.getTracks().forEach(track => {
    track.stop();
  });
  //关闭屏幕共享
  // console.log(qq.value,111111111111);
  showShoot.value = false
}
const onClearContactDetail = () => {
  emit("clearContactDetails", false);
  inpValue.value = "";
  showEmoji.value = false;
  add_oInfo.value = false;
};
const inpValue = ref("");
//控制聊天详情弹出框打开关闭
const showSetting = ref(false);
const informationInfo = () => {
  showSetting.value = true;
};
const clearinformation = () => {
  showSetting.value = false;
};
//控制输入框/语音切换
const Phonetic = ref(true);
const onPhonetic = () => {
  Phonetic.value = !Phonetic.value;
};

// 按回车发送信息
const onKeyup = (e) => {
  if (e.keyCode === 13) {
    submit();
  }
};

//点击发送按钮执行事件
const submit = () => {
  const data = {
    type: 1,
    data: {
      fromId: userStore.info.id,
      toId: props.propsItem.id,
      fromAvatar: userStore.info.avatar,
      toAvatar: userStore.friendlist[0].avatar,
      value: inpValue.value,
      time: new Date().getTime(),
    },
  };

  userStore.ws.send(JSON.stringify(data));
  inpValue.value = "";
};

//滚动到最底部
const popupMain = ref(null);
const scrollBottom = () => {
  nextTick(() => {
    if (popupMain.value) {
      popupMain.value.scrollTop += popupMain.value.scrollHeight;
    } else {
      // console.error("popupMain is not defined!");
    }
  });
  inpValue.value = "";
};

onMounted(() => {
  scrollBottom();
  init()
});

//点击加号图标显示底部
const add_oInfo = ref(false);

const add_o = () => {
  add_oInfo.value = !add_oInfo.value;
  showEmoji.value = false;

};

onUpdated(() => {
  add_oInfo.value = true
});

// emj 的区域
const showEmoji = ref(false);

const onEmj = () => {
  showEmoji.value = !showEmoji.value
  add_oInfo.value = true
}
//视频通话遮罩层
const showMaskBottom = ref(false);
const maskBottom = () => {
  console.log(11111111);
  isSwitchvideocalls.value = true
  showMaskBottom.value = true
}
//视频通话
const isShowTop = ref(false)
const VideoCall = () => {
  isShowTop.value = true
  showMaskBottom.value = false
  startTimer()
  console.log('视频通话');
  navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
      localStream = stream;
      localVideo.value.srcObject = stream;

      // 假设WebSocket连接已建立，并发送信令来创建PeerConnection  
      // 这里仅作为示例，不实际建立WebSocket连接  
      // peerConnection = new RTCPeerConnection(/* 配置 */);  
      // 发送offer等信令逻辑...  
    })
    .catch(error => console.error("Error accessing media devices.", error));
}
// const localVideo = ref(null);
const remoteVideo = ref(null);
let localStream = null;
let peerConnection = null;
function endCall() {
  isShowTop.value = false
  isSwitchvoicecalls.value = false;
  isSwitchvideocalls.value = false;
  // clearInterval(intervalId); // 清除计时器
  elapsedTime.value = 0; // 将已耗时设置为0
  if (localStream) {
    localStream.getTracks().forEach(track => track.stop());
    localStream = null;
    //   pauseTimer()
    // resetTimer()
  }
  if (peerConnection) {
    peerConnection.close();
    peerConnection = null;
  }

}


onMounted(() => {
  // 可以在这里初始化WebSocket连接等  
});

onUnmounted(() => {
  endCall();
});
//语音通话
const VoiceCall = () => {
  console.log('语音通话');
  isShowTop.value = true
  showMaskBottom.value = false
  isSwitchvideocalls.value = false;
  isSwitchvoicecalls.value = true;
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      localStream = stream;
      localVideo.value.srcObject = stream;

      // 假设WebSocket连接已建立，并发送信令来创建PeerConnection  
      // 这里仅作为示例，不实际建立WebSocket连接
      // WebSocket.send(JSON.stringify({ type: 'offer', sdp: peerConnection.localDescription }));
    })
    .catch(error => console.error("Error accessing media devices.", error));
}
//计时器
const isRunning = ref(false); // 是否正在计时
const elapsedTime = ref(0); // 已耗时（以毫秒为单位）
let intervalId = null; // setInterval的ID

const formatTime = (milliseconds) => {
  const seconds = Math.floor((milliseconds / 1000) % 60);
  const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
  const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
};

// 启动计时器
const startTimer = () => {
  if (isRunning.value) return; // 如果已经在计时，直接返回
  isRunning.value = true; // 更新状态为“正在计时”
  intervalId = setInterval(() => {
    elapsedTime.value += 1000; // 每秒累加1000毫秒
  }, 1000);
};

// 暂停计时器
const pauseTimer = () => {
  isRunning.value = false; // 更新状态为“暂停”
  clearInterval(intervalId); // 清除计时器
};

// 重置计时器
const resetTimer = () => {
  isRunning.value = false; // 更新状态为“已重置”
  clearInterval(intervalId); // 清除计时器
  elapsedTime.value = 0; // 将已耗时设置为0
};

// 组件销毁时清除计时器
watch(isRunning, (newValue) => {
  if (!newValue && intervalId) {
    clearIntervalId(intervalId);
  }
})

const Fuzzy = () => {
  console.log('模糊背景');
}
// 视频
const isSwitchvideocalls = ref(false)
// 语音
const isSwitchvoicecalls = ref(false)
const Switchvoicecalls = () => {
  console.log('切换到语音');
  isSwitchvideocalls.value = false;
  isSwitchvoicecalls.value = true;
  localStream.getTracks().forEach(track => track.stop());
  localStream = null;
}
//静音
const isMute = ref(false)
const mute = () => {
  isMute.value = !isMute.value
}

//免提
const isHands = ref(false)
const hands = () => {
  isHands.value = !isHands.value
}
// 时间封装
const formatDate = (time) => {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以加1，并用0填充
  const day = String(date.getDate()).padStart(2, "0"); // 用0填充
  const hours = String(date.getHours()).padStart(2, "0"); // 用0填充
  const minutes = String(date.getMinutes()).padStart(2, "0"); // 用0填充
  return `${hours}:${minutes}`;
};

//  在发送信息之后，将输入的内容中属于表情的部分替换成emoji图片标签
//  再经过v-html 渲染成真正的图片
const replaceFace = (con) => {
  // console.log(con);
  if (con.includes("/:")) {
    var emojis = userStore.emojis;
    for (var i = 0; i < emojis.length; i++) {
      con = con.replace(
        emojis[i].reg,
        '<img src="static/emoji/' +
        emojis[i].file +
        '"  alt="" style="vertical-align: middle; width: 24px; height: 24px" />'
      );
    }
    return con;
  }
  if (/^(https?:\/\/|\/|\bdata:image\/)/.test(con)) {
    // 假设con是一个有效的图片URL或相对路径或Base64编码的图片  
    return `<img src="${con}" alt="" class="img1" style="width:100px;height:100px">`;
  }
  return con;
};
const uploadImage = () => {
  router.push('/getUser')
}
const stopA = () => {
  router.push('/getUser')
}
watch(
  () => userStore.list[props.propsItem?.id],
  (n) => {
    scrollBottom();

    // console.log(props.propsItem);
    // console.log(props.showDetails);
    // console.log(props.toUser);
  },
  {
    deep: true,
  }
);

</script>
<template>
  <div class="chatwindow">
    <div class="popup">
      <van-popup v-model:show="props.showDetails" position="right" close-icon-position="top-left"
        :style="{ width: '100%', height: '100%' }">
        <!-- 聊天顶部 -->
        <div class="popup_top">
          <TitleNavBars :propsItem="{ title: props.propsItem.nickname }" :clearContactDetails="onClearContactDetail"
            :rightInfo="true" :informationInfo="informationInfo" icon="ellipsis" />
        </div>
        <!-- 内容 -->
        <div :class="showEmoji == false && add_oInfo === true
          ? 'popup_main'
          : 'show_popup_main'
          " ref="popupMain">
          <ul class="main_list">
            <li v-for="item in userStore.list[props.toUser.id]" :key="item.item" :class="[
              'main_item',
              userStore.info.id === item.fromId ? 'right' : 'left',
            ]">
              <div class="item">
                <!-- 时间 -->
                <div class="time">
                  <span>{{ setTimeFormat(item.time) }}</span>
                </div>
                <div class="info">
                  <!-- 头像 -->
                  <img :src="item.fromAvatar" />
                  <div class="info_text">
                    <!-- 内容 -->
                    <div class="info_textContent" v-html="replaceFace(item.value)">
                    </div>

                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 拍照 -->
        <van-popup v-model:show="showShoot" position="right" :style="{ width: '100%', height: '100%' }">
          <video ref="videoElement" autoplay class="videoA" v-if="videoStream">蓝屏警告</video>
          <button @click="stopCall" v-if="videoStream" class="stopCallA">拍照</button>
          <div class="stopCallc" @click="chaAB">
            ×
          </div>
          <div class="stopCallVV">
            <img v-if="photoUrl" :src="photoUrl" alt="请拍摄!!" class="stopCallV" @click="stopA">
          </div>
        </van-popup>
        <!-- 底部 -->
        <div class="popup_footer">
          <!-- 文字语音的切换 -->
          <div class="footer_left" @click="onPhonetic">
            <img v-if="Phonetic" class="iconP" src="../assets/yuyin.png" alt="" />
            <img v-else class="iconP" src="../assets/weixinjianpan.png" alt="" />
          </div>
          <div class="footer_main">
            <!-- 输入框 -->
            <div v-if="Phonetic" class="inptext">
              <input class="inp" ref="inputRef" type="text" @keyup="onKeyup" v-model="inpValue" />
              <div v-html="replaceFace(inpValue)" @click="focusInput" class="inputVal"></div>
            </div>

            <!-- 语音 -->
            <p v-else class="text">按住 说话</p>
          </div>
          <div :class="inpValue === '' ? 'footer_right' : 'footer_right active'">
            <!-- mej表情包 -->
            <van-icon class="emj" @click="onEmj" name="smile-o" size="33" />
            <!-- 工具栏 -->
            <van-icon class="emj" name="add-o" size="33" v-if="inpValue === '' || !Phonetic" @click="add_o" />
            <!-- 发送消息 -->
            <p v-else class="send" @click="submit">发送</p>
          </div>
        </div>
        <!-- emj弹框 -->
        <div class="emoji" v-if="showEmoji == true">
          <transition name="showbox">
            <div class="emojiBox" v-show="showEmoji">
              <li v-for="(item, index) in userStore.emojis">
                <img :src="'static/emoji/' + item.file" :data="item.code" @click="inpValue += item.code" />
              </li>
            </div>
          </transition>
        </div>
        <!-- 工具 -->
        <div :class="add_oInfo === true ? '' : 'eject'" v-if="add_oInfo == false">
          <van-swipe class="my-swipe" indicator-color="white" :loop="false">
            <van-swipe-item>
              <van-grid class="vangrid1">
                <van-grid-item @click="uploadImage">
                  <div class="iconfont">&#xe8d3;</div>
                  <span class="textss">图片</span>
                </van-grid-item>
                <van-grid-item @mouseup="shoot" @mousedown="startCall">
                  <div class="iconfont">&#xe601;</div>
                  <span class="textss">拍照</span>
                </van-grid-item>
                <van-grid-item @click="maskBottom">
                  <div class="iconfont">&#xe600;</div>
                  <span class="textss">视频通话</span>
                </van-grid-item>
                <van-grid-item>
                  <div class="iconfont">&#xe7e6;</div>
                  <span class="textss">位置</span>
                </van-grid-item>
                <van-grid-item>
                  <div class="iconfont">&#xe937;</div>
                  <span class="textss">红包</span>
                </van-grid-item>
                <van-grid-item>
                  <div class="iconfont">&#xe60f;</div>
                  <span class="textss">转账</span>
                </van-grid-item>
                <van-grid-item>
                  <div class="iconfont">&#xe6e1;</div>
                  <span class="textss">语音输入</span>
                </van-grid-item>
                <van-grid-item>
                  <div class="iconfont">&#xe604;</div>
                  <span class="textss">收藏</span>
                </van-grid-item>
              </van-grid>
            </van-swipe-item>
            <van-swipe-item>
              <van-grid class="vangrid2">
                <van-grid-item>
                  <div class="iconfont">&#xe627;</div>
                  <span class="textss">个人名片</span>
                </van-grid-item>
                <van-grid-item>
                  <div class="iconfont">&#xe68f;</div>
                  <span class="textss">文件</span>
                </van-grid-item>
                <van-grid-item>
                  <div class="iconfont">&#xe67c;</div>
                  <span class="textss">卡券</span>
                </van-grid-item>
                <van-grid-item>
                  <div class="iconfont">&#xe6e5;</div>
                  <span class="textss">音乐</span>
                </van-grid-item>
              </van-grid>
            </van-swipe-item>
          </van-swipe>
        </div>
      </van-popup>
    </div>
    <div class="ChatDetails">
      <ChatDetails :showSetting="showSetting" :propsItemTitle="{
        title: props.propsItem.nickname,
        img: props.propsItem.avatar,
      }" @clearinformation="clearinformation" @informationInfo="informationInfo" />

    </div>

  </div>
  <!-- 视频通话 -->
  <van-popup v-model:show="isShowTop" position="top" :style="{ height: '100%', backgroundColor: '#ccc' }">
    <div v-show="isSwitchvideocalls">
      <div class="localVideoTop">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><img style="width: 20px;height:20px;"
            src="../../public/image/suoxiao.png" alt=""></span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>
          <div class="father">
            <div class="time">{{ formatTime(elapsedTime) }}</div>
            <div class="controls">
              <!-- <button @click="startTimer" :disabled="isRunning">开始</button>
      <button @click="pauseTimer" :disabled="!isRunning">暂停</button>
      <button @click="resetTimer">重置</button> -->
            </div>
          </div>

        </span>
      </div>
      <video ref="localVideo" autoplay muted class="video"></video>
      <div class="videoBox0">
        <video ref="remoteVideo" autoplay></video>
      </div>
      <!-- <button @click="startCall">开始通话</button> -->
      <div class="videoBox">
        <div class="videoBox1">
          <div class="videoBox1-1">
            <img src="../../public/image/fanzhuanxiangjibeifen3.png" alt="">
            <p>翻转</p>
          </div>
          <div class="videoBox1-1" @click="Fuzzy">
            <img src="../../public/image/bi-person-lines-fill.png" alt="">
            <p>模糊背景</p>
          </div>
          <div class="videoBox1-1" @click="Switchvoicecalls">
            <img src="../../public/image/zhuanfa.png" alt="">
            <p>切换语音通话</p>
          </div>
        </div>
        <div @click="endCall" class="endCall">
          <img src="../../public\image\guaduan.png" alt="">
          <p>挂断</p>
        </div>
      </div>
    </div>
    <!-- 语音通话 -->
    <div v-show="isSwitchvoicecalls" style="width: 100vw;height: 100vh; overflow: hidden;color:white;">
      <!-- 哈喽!!! -->
      <div style="width: 100%;height:30px;">&nbsp;&nbsp;<img style="width: 20px;height:20px;"
          src="../../public/image/suoxiao.png" alt=""></div>
      <div class="Switchvoicecalls1">
        <!-- {{ console.log(props.propsItem.avatar,221) }} -->
        <div><img :src="props.propsItem.avatar" alt=""></div>
        <div style="font-size: 20px;margin-top: 20px;">{{ userStore.friendlist[0].username }}</div>
      </div>
      <div class="Switchvoicecalls2">
        <div>已接通</div>
        <div class="time">{{ formatTime(elapsedTime) }}</div>
      </div>
      <div class="Switchvoicecalls3">
        <div class="videoBox1-1" @click="mute">
          <img v-if="isMute" src="../../public\image\jingyinxuanzhong.png" alt="" style="width: 50px;height:50px;">
          <img v-else src="../..\public\image\jingyin_2.png" alt="" style="width: 50px;height:50px;">
          <br>
          <p>静音</p>
        </div>
        <div class="videoBox1-1" @click="endCall">
          <img src="../../public\image\guaduan.png" alt="" style="width: 50px;height:50px;">
          <br>
          <p>挂断</p>
        </div>
        <div class="videoBox1-1" @click="hands">
          <img v-if="isHands" src="../../public\image\miantihui.png" alt="" style="width: 50px;height:50px;">
          <img v-else src="../../public\image\miantimoren.png" alt="" style="width: 50px;height:50px;">
          <br>
          <p>免提</p>
        </div>
      </div>
    </div>
  </van-popup>
  <!-- 视频通话遮罩层 -->
  <van-popup style="display: flex;flex-direction: column;
    justify-content: space-around;
    align-items: center;" v-model:show="showMaskBottom" position="bottom" :style="{ height: '30%' }">
    <p @click="VideoCall">视频通话</p>
    <p @click="VoiceCall">语音通话</p>
    <p @click="showMaskBottom = false">取消</p>
  </van-popup>
</template>
<style scoped lang="scss">
.stopCallc {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 30px;
  left: 28px;
  z-index: 999;
  width: 30px;
  height: 30px;
  border-radius: 60px;
  border: none;
}
.stopCallVV {
  position: absolute;
  top: 535px;
  left: 30px;
  z-index: 1000;
  width: 80px;
  height: 80px;
  border-radius: 18px;
  background-color: aliceblue;
}

.stopCallV {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 999;
  width: 80px;
  height: 80px;
  border-radius: 18px;
  border: none;
}
.stopCallA {
  position: absolute;
  top: 535px;
  right: 150px;
  z-index: 999;
  width: 80px;
  height: 80px;
  border-radius: 60px;
  border: none;
}

.videoA {
  width: 100%;
  height: 100%;
  /* object-fit: cover; 铺满全屏 */
  max-width: 100%;
  background-color: black;
  margin-bottom: 10px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.Switchvoicecalls1 {
  width: 100%;
  height: 415px;
  // background-color: chartreuse;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;

  img {
    width: 125px;
    height: 125px;
    border-radius: 10px;
  }
}

.Switchvoicecalls2 {
  width: 100%;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  // background-color: cyan;
}

.Switchvoicecalls3 {
  display: flex;
  width: 100%;
  // height: 19%;
  margin-top: 30px;
  justify-content: space-around;
  // background-color: rgba(128, 255, 174, 0.667);
}

.video {
  height: calc(100vh - 30px);
  width: 100%;
  position: absolute;
  object-fit: cover;
  overflow: hidden;
}

.videoBox0 {
  position: fixed;
  top: 30px;
  right: 0px;
  width: 25%;
  height: 25%;
  background-color: chartreuse;
  border-radius: 5%;
}

.localVideoTop {
  width: 100%;
  height: 30px;
  // background-color: red;
  display: flex;
  align-items: center;
  color: white;
}

.videoBox1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80%;
  width: 100%;
}

.videoBox1-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.videoBox {
  position: relative;
  top: 440px;
  left: 18px;
  width: 90%;
  height: 29%;
  color: #fff;
  align-items: center;
  // background-color: #00c75a;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.videoBox1 {
  width: 100%;
  height: 60px;
  // background-color: aqua;
  display: flex;
  justify-content: center;

  .videoBox1-1 {
    width: 100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 35px;
      height: 30px;
      margin-bottom: 20px;
      // border:5px solid rgba(0,0,0,0.5);
      // border-radius: 50%;
    }
  }
}

.endCall {
  width: 50px;
  height: 50px;
  margin-top: 50px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  img {
    width: 70px;
    height: 70px;
  }
}



.popup_top {
  width: 100vw;
  height: 40px;
}

.top_left {
  width: 50px;
}

.info_textContent {
  max-width: 200px;
  word-break: break-all;
}

.top_content {
  flex: 1;
  text-align: center;
}

.top_right {
  width: 50px;
  text-align: center;
  font-size: 20px;
}

.popup_main {
  width: 100vw;
  height: calc(100vh - 80px);
  background-color: #ededed;
  overflow-y: auto;
  overflow-x: hidden;
}

.show_popup_main {
  width: 100vw;
  height: calc(100vh - 260px);
  background-color: #ededed;
  overflow-y: auto;
  overflow-x: hidden;
}

.main_list {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.main_item::-webkit-scrollbar {
  display: none;
}

.main_list .main_item {
  width: 100%;
  display: flex;
}

.item {
  width: 100vw;
  position: relative;
}

.time {
  width: 150px;
  font-size: 17px;
  margin: 7px auto;
  text-align: center;

  span {
    display: inline-block;
    padding: 4px 6px;
    color: #fff;
    border-radius: 3px;
    background-color: #dcdcdc;
  }
}

.main_list .main_item+.main_item {
  margin-top: 10px;
}

.main_item.right {
  justify-content: flex-end;
}

.main_item.right .info {
  display: flex;
  flex-direction: row-reverse;
}

.main_item.left {
  justify-content: flex-start;
}

.main_item.left .info {
  display: flex;
}

.info img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.main_item.right .info .info_text {
  max-width: 200px;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: row-reverse;
  background-color: #a9e87a;
  margin-right: 10px;
  position: relative;

  &::before {
    content: " ";
    position: absolute;
    top: 12px;
    left: 100%;
    border: 6px solid transparent;
    border-left-color: #a9e87a;
  }
}

.main_item.left .info .info_text {
  max-width: 200px;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 10px;
  background-color: #fff;
  margin-left: 10px;
  position: relative;

  &::before {
    content: " ";
    position: absolute;
    top: 12px;
    right: 100%;
    border: 6px solid transparent;
    border-right-color: #fff;
  }
}

.popup_footer {
  width: 100vw;
  height: 40px;
  background-color: #f7f7f7;
  display: flex;
  justify-content: space-between;
}

.footer_left {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  position: relative;
}

.footer_left img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.footer_main {
  flex: 1;
  background-color: white;
  min-height: 30px;
  margin-top: 2px;
  border-radius: 12px;
  // overflow: hidden;
}

.footer_main .inptext {
  width: 100%;
  // height: 100%;
  line-height: 32px;
  border: none;
  padding: 3px;
  font-size: 15px;
  position: relative;
  // overflow: hidden;
}

.inp {
  width: 100%;
  border: none;
  padding: 3px;
  font-size: 10px;
  z-index: 10;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.inputVal {
  // z-index: 10;
  width: 211px;
  height: 30px;
  margin-left: 4px;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
}

.footer_main .text {
  text-align: center;
  line-height: 35px;
}

.footer_right {
  width: 90px;
  height: 40px;
  display: flex;
}

.active {
  width: 115px;
}

.emj {
  width: 40px;
  height: 40px;
  padding: 5px;
}

.send {
  width: 70px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  background-color: #00c75a;
  color: white;
  margin-top: 3px;
  border-radius: 10px;
}

.iconP {
  width: 30px;
  height: 30px;
  background-color: #eee;
}

.emoji {
  // width: 100vw;
  height: 180px;
}

.emojiBox {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 180px;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  box-shadow: 0 1px 2px 1px #d1d1d1;

  &.showbox-enter-active,
  &.showbox-leave-active {
    transition: all 0.5s;
  }

  &.showbox-enter,
  &.showbox-leave-active {
    opacity: 0;
  }
}

// 工具
.iconfont {
  width: 60px;
  line-height: 37px;
  border-radius: 5px;
  font-size: 28px;
}

.van-grid-item {
  background: #ccc;
}

.textss {
  font-size: 12px;
  margin-top: 5px;
}

.vangrid1>.van-grid-item:nth-of-type(1) {
  .iconfont {
    font-size: 32px;
  }

  .textss {
    font-size: 12px;
  }
}

.vangrid1>.van-grid-item:nth-of-type(4) {
  .iconfont {
    font-size: 25px;
  }

  .textss {
    font-size: 12px;
  }
}

.vangrid2>.van-grid-item:nth-of-type(1) {
  .iconfont {
    font-size: 25px;
  }

  .textss {
    font-size: 12px;
  }
}

.vangrid2>.van-grid-item:nth-of-type(2) {
  .iconfont {
    font-size: 25px;
  }

  .textss {
    font-size: 12px;
  }
}

.vangrid2>.van-grid-item:nth-of-type(3) {
  .iconfont {
    font-size: 33px;
  }

  .textss {
    font-size: 12px;
  }
}

.vangrid2>.van-grid-item:nth-of-type(4) {
  .iconfont {
    font-size: 28px;
  }

  .textss {
    font-size: 12px;
  }
}

.my-swipe .van-swipe-item {
  color: gray;
  font-size: 20px;
  text-align: center;
}
</style>